<!-- 注册界面-->
<template>
    <el-steps :active="active" finish-status="success">
        <el-step title="第一步" />
        <el-step title="第二步" />
        <el-step title="第三步" />
    </el-steps>

    <el-form >
        <div v-show="active == 2">
            <el-form-item label="用户：">
            <el-input v-model="form.username" />
            </el-form-item>
            <el-form-item label="密码：">
            <el-input type="password" v-model="form.password1" />
            </el-form-item>
            <el-form-item label="密码：">
            <el-input type="password" v-model="form.password2" />
            </el-form-item>
        </div>
        <div v-show="active == 1">
            <el-form-item label="邮箱：">
            <el-input v-model="form.email" />
            </el-form-item>
            <el-form-item label="验证码：">
            <el-input v-model="form.code" />
            </el-form-item>
        </div>
        <div v-show="active == 3">
            <el-form-item label="专业：">
            <el-input v-model="form.major" />
            </el-form-item>
            <el-form-item label="年级：">
            <el-input v-model="form.grade" />
            </el-form-item>
        </div>
        <el-button v-if="active < 4" style="margin-top: 12px" @click="next">下一步</el-button>
<el-button v-if="active > 1" style="margin-top: 12px" @click="pre">上一步</el-button>

    </el-form>
</template>

<script lang="ts" setup>

import { reactive,ref } from 'vue'
const active=ref(1)
const form = reactive({
    username:'',
    password1:'',
    password2:'',
    email:'',
    code:'',
    major:'',
    grade:'',
})

const next = () => {
    if (active.value++ > 2) active.value = 0
}




     // 步骤条上一步的方法
const pre=()=> {
    if (active.value-- < 2) active.value = 1
}

</script>


<style scoped>

</style>